<template>
  <div class="match-detail-data">
    <div class="tabs">
      <span
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab', { active: currentTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        {{ tab.name }}
      </span>
    </div>
    <div class="content" v-if="hasData">
      <component :is="currentTabComponent"></component>
    </div>
    <div class="no-data" v-else>
      <img src="@/assets/imgs/empty.webp" alt="无数据图标" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import RankingList from './footballComponents/RankingList.vue'
import RelatedNews from './footballComponents/RelatedNews.vue'

const currentTab = ref('ranking')
const hasData = ref(false)
const tabs = [
  { key: 'ranking', name: '积分排名' },
  { key: 'news', name: '相关资讯' }
]
const rankingData = ref([])
const newsData = ref([])

const currentTabComponent = computed(() => {
  return currentTab.value === 'ranking' ? RankingList : RelatedNews
})

const switchTab = (tabKey) => {
  currentTab.value = tabKey
  //   fetchData()
}

const fetchData = async () => {
  hasData.value = false
  try {
    if (currentTab.value === 'ranking') {
      await fetchRankingData()
    } else {
      await fetchNewsData()
    }
    hasData.value =
      currentTab.value === 'ranking' ? rankingData.value.length > 0 : newsData.value.length > 0
  } catch (error) {
    console.error('获取数据失败:', error)
    hasData.value = false
  }
}

const fetchRankingData = async () => {
  // 这里应该是实际的API调用
  // 示例: rankingData.value = await api.getRankingData()
  rankingData.value = [] // 模拟空数据
}

const fetchNewsData = async () => {
  // 这里应该是实际的API调用
  // 示例: newsData.value = await api.getNewsData()
  newsData.value = [] // 模拟空数据
}

onMounted(() => {
  //   fetchData()
})
</script>

<style scoped>
.match-detail-data {
  background-color: #fff;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab {
  margin: 0 20px;
  padding: 20px 0;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.tab.active {
  color: #16b13a;
  border-bottom: 2px solid #16b13a;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.no-data img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.no-data p {
  color: #999;
  font-size: 14px;
}
</style>
